<template>
  <div class="radio_box">
    <div class="flex_center">
      <el-radio-group v-model="radioValue" :disabled="disabled" @change="change" v-if="!isButton">
        <el-radio v-for="item in optionLists" :key="optionKey ? item[optionKey.value] : item.value" :label="optionKey ? item[optionKey.value] : item.value" :disabled="item.disabled ? item.disabled : false">
          <span v-if="showLabel.length > 0" class="labelAll">
            <span v-for="itemIndex in showLabel" :key="itemIndex + ''">{{
              item[itemIndex]
            }}</span>
          </span>
          <span v-else>{{
            optionKey ? item[optionKey.label] : item.label
          }}</span>
        </el-radio>
      </el-radio-group>
      <el-radio-group v-model="radioValue" :disabled="disabled" @change="change" v-else>
        <el-radio-button v-for="item in optionLists" :key="optionKey ? item[optionKey.value] : item.value" :label="optionKey ? item[optionKey.value] : item.value" :disabled="item.disabled ? item.disabled : false">
          <span v-if="showLabel.length > 0" class="labelAll">
            <span v-for="itemIndex in showLabel" :key="itemIndex + ''">{{
              item[itemIndex]
            }}</span>
          </span>
          <span v-else>{{
            optionKey ? item[optionKey.label] : item.label
          }}</span>
        </el-radio-button>
      </el-radio-group>
      <div class="zidingyi_box" :class="[timerActive ? 'timerActive' : '']" v-if="isZidingyi">
        <span>自定义</span>
        <div class="timer_box">
          <el-date-picker :editable="false" v-model="timer" value-format="yyyy-MM-dd" @change="timerChange" type="monthrange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ComRadio",
  props: {
    isButton: {
      // 是否是按钮样式，非必传。
      type: Boolean,
      default: false,
    },
    value: String | Number,
    options: {
      type: Array | Object, // radio选项列表JSON串，如此项有值，则直接用此选项中的数据，不会进行数据请求去获取数据。即优先级options>url。默认为空，非必传。
      default: function () {
        return [
          {
            value: "month",
            label: "当月",
          },
          {
            value: "quarter",
            label: "当季",
          },
        ];
      },
    },
    isZidingyi: {
      type: Boolean,
      default: true,
    },
    url: {
      // 请求选择项URL地址，默认数据字典请求接口地址，非必传。
      type: String,
      default: "/getDictionary",
    },
    urlCode: String, // 请求数据字典时的参数值，若url为数据字典请求地址，则必传，其余情况非必传。
    urlParams: String, // 接口其余请求参数的JSON串，非必传。
    disabled: {
      // 是否禁用，默认false，非必传。
      type: Boolean,
      default: false,
    },
    optionKeys: Object, // 指定显示的vaule和label的key值JSON串，若此项有值，则不再用'value'和'label'作为属性名，以此项设置为准，默认空，非必传。
    showLabels: String, // 可选项展示值字符串，逗号隔开，若此项有值，则可选项所展示文字不再用'label'的值，以此项设置为准，展示时按照顺序展示出来。默认空，非必传。
  },
  data() {
    return {
      optionLists: [],
      optionKey: null,
      requestParams: null,
      showLabel: [],
      radioValue: this.value,
      timer: "",
      timerActive: false,
    };
  },
  watch: {
    options() {
      if (this.options) this.optionLists = this.options;
    },
    urlCode() {
      this.getOptions();
    },
    urlParams() {
      this.requestParams = this.urlParams ? this.urlParams : null;
      this.getOptions();
    },
    url() {
      this.getOptions();
    },
    value() {
      this.selectValue = this.value;
    },
    optionKeys() {
      this.optionKey = this.optionKeys ? this.optionKeys : null;
    },
    showLabels() {
      this.showLabel = this.showLabels ? this.showLabels.split(",") : [];
    },
  },
  created() {
    this.optionKey = this.optionKeys ? this.optionKeys : null;
    this.showLabel = this.showLabels ? this.showLabels.split(",") : [];
    this.requestParams = this.urlParams ? this.urlParams : null;
    if (this.options) {
      // 如果父组件有可选项数据，则不进行数据请求
      this.optionLists = this.options;
    } else {
      this.getOptions();
    }
  },
  methods: {
    /**
     * 获取选择项数据
     **/
    getOptions() {
      let params = {};
      if (this.urlCode) params.code = this.urlCode;
      if (this.requestParams) {
        params = Object.assign(params, this.requestParams);
      }
      this.axios
        .get(this.url, { params })
        .then((res) => {
          this.optionLists = res.list; // 假设返回的数据封装在list中
        })
        .catch(() => {});
    },
    /**
     * 选择框选中时触发
     * @val {String} 当前选中值
     **/
    change(val) {
      // console.log(this.$getMonth("s"));
      // let value = "value";
      // if (this.optionKey) value = this.optionKey.value;

      // const valOption = this.optionLists.filter(
      //   (itemO) => itemO[value] === val
      // );
      // const [valObj] = valOption;
      if (val == "month") {
        this.month();
      } else if (val == "quarter") {
        this.getQuarterMonth();
      } else if (val == "lastMonth") {
        // this.getQuarterMonth();
        this.getLastMonth();
      }
      this.timerActive = false;
    },
    //时间改变
    timerChange(event) {
      // console.log(event);
      this.radioValue = "";
      this.timerActive = true;
      this.$emit("change", event);
    },
    month() {
      this.$emit("change", [this.$getMonth("s"), this.$getMonth("e")]);
    },
    getQuarterMonth(type) {
      this.$emit("change", [
        this.$getQuarterMonth("s"),
        this.$getQuarterMonth("e"),
      ]);
    },
    getLastMonth(type) {
      this.$emit("change", [this.$getLastMonth("s"), this.$getLastMonth("e")]);
    },
  },
};
</script>
<style lang="scss" scoped>
.labelAll {
  span {
    margin-right: 10px;
    &:last-child {
      font-size: 13px;
      color: #8492a6;
    }
  }
}
</style>
<style lang="scss">
.radio_box {
  display: inline-block;
}
.myStyle {
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: url("../../../assets/images/echarts/tabsel.png");
    background-size: 100% 100%;
    span {
      color: #31d7ce !important;
    }
  }
  .el-radio-button__inner,
  .zidingyi_box {
    cursor: pointer;
    background: url("../../../assets/images/echarts/tab.png");
    background-size: 100% 100%;
    border-radius: 0 !important;
    margin-right: 3px;
    margin-left: 3px;
    height: 28px;
    /* line-height: 0px; */
    padding: 8px 13px;
    min-width: 62px;
    font-size: 13px;
    span {
      color: #1b8fa0 !important;
      display: inline-block;
      height: 16px;
      line-height: 15px;
      cursor: pointer;
      position: relative;
      top: -1px;
    }
  }
  .zidingyi_box {
    position: relative;
    margin-right: 5px;
    span {
      display: inline-block;
      height: 15px;
      line-height: 15px;
    }
    .timer_box {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .timerActive {
    background: url("../../../assets/images/echarts/tabsel.png");
    background-size: 100% 100%;
    span {
      color: #31d7ce !important;
    }
  }
}
</style>